<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>   
	  <script type="text/javascript" src="../eXo.js"></script>
    <script type="text/javascript" src="../eXo/core/DOMUtil.js"></script>
    <script type="text/javascript"src="../eXo/core/Util.js"></script>
    <script type="text/javascript" src="../eXo/core/Browser.js"></script>
    <script type="text/javascript" src="../eXo/webui/UIPopup.js"></script>
    <script type="text/javascript" src="../eXo/webui/UIPopupMenu.js"></script>
    <script type="text/javascript" src="../eXo/dnd/DragDrop.js"></script>    
    <script type="text/javascript">
      var DOMUtil = eXo.core.DOMUtil ;
    </script>
    
    <style type="text/css">
      body {
        margin: 0px; padding: 0px ;
      }
      
      .Root {
        border: solid 2px green ;
        padding: 10px ;
        height: 550px ;
      }
      
      .ControlWorkspace {
        width: 230px ;
        height: 100% ;
        float: left ;
        border: solid 1px blue ;
      }
      
      .WorkingWorkspace {
        margin-left: 240px ;
        height: 100% ;
        border: solid 1px blue ;
      }
      
      .MenuItemContainer {
        border: solid 1px green ;
        padding: 2px 3px ;
        /* !important : not considered by IE */
        width: auto !important;
        /* *property : considered by IE only */
        *width: 0px;
        z-index: 1;
        position: absolute;
      }
      
      .MenuItemL {
      	border: solid 1px yellow ;
        background: #a4cbef ;
        margin: 2px 0px ;
        height: 20px ;
        cursor: pointer ;
        white-space: nowrap;
        
        padding-left: 20px;
        background: url(../icons/16x16/DefaultSkin/Portal.gif) #a4cbef no-repeat left center;
      }
      
      .MenuItemContainer .OnMouseOver {
      	border: solid 1px red ;
        background-color: blue ;
      }
      
      .MenuItemR {
      	padding-right: 20px;
      }
      
      .HasSubMenu {
      	background: url(../icons/16x16/DefaultSkin/BlackRightArrow.gif) no-repeat right center;
      }
      
      .SubLevel {
      	visibility: hidden;
      }
            
    </style>
    <title>UIPopupMenu</title>
  </head>
  
  <body>
    <div class="Root">
      <div class="ControlWorkspace">
        <span> </span>
      </div>
      
      <div class="WorkingWorkspace" id="WorkingWorkspace">
        <span id="show" style="cursor: pointer" onclick="eXo.webui.UIPopupMenu.show('UIPopupMenu')">Show</span>
        <span id="hide" style="cursor: pointer" onclick="eXo.webui.UIPopupMenu.hide('UIPopupMenu')">Hide</span>
        
        <div class="UIPopupMenu" id="UIPopupMenu">
	        <div class="MenuItemContainer">
	          <div class="MenuItemL">
	          	<div class="MenuItemR">
	          		<div class="MenuItem">
			            <div class="LabelItem">MenuItem 1</div>
			            <div class="MenuItemContainer SubLevel">
			            	<div class="MenuItemL">
	          					<div class="MenuItemR">
					              <div class="MenuItem">Sub Item Menu 1.1</div>
					             </div>
			          		</div>
				            <div class="MenuItemL">
          						<div class="MenuItemR">
					              <div class="MenuItem">Sub Item Menu 1.2</div>
				              </div>
			          		</div>
			            </div>
			          </div>
			        </div>	            
	          </div>
	          
	          <div class="MenuItemL">
	          	<div class="MenuItemR">
			          <div class="MenuItem">
			            <div class="LabelItem">MenuItem 2</div>
			            <div class="MenuItemContainer SubLevel">
			            	<div class="MenuItemL">
	          					<div class="MenuItemR">
	          						<div class="MenuItem">Sub Item Menu 2.1</div>
	          					</div>
					          </div>
	          				<div class="MenuItemL">
	          					<div class="MenuItemR">
					              <div class="MenuItem">
					                <div class="LabelItem">Sub Item Menu 2.2 something much longer</div>
					                <div class="MenuItemContainer SubLevel">
					                	<div class="MenuItemL">
	          									<div class="MenuItemR">
									              <div class="MenuItem">Sub Item Menu 2.2.1</div>
									            </div>	            
	          								</div>  
									          <div class="MenuItemL">
	          									<div class="MenuItemR">    
									              <div class="MenuItem">
										              <div class="LabelItem">Sub Item Menu 2.2.2</div>
										              <div class="MenuItemContainer SubLevel">
											            	<div class="MenuItemL">
									          					<div class="MenuItemR">
													              <div class="MenuItem">Sub Item Menu 2.2.2.1</div>
													            </div>	            
									          				</div>
													          <div class="MenuItemL">
									          					<div class="MenuItemR">
													              <div class="MenuItem">Sub Item Menu 2.2.2.2</div>
													            </div>	            
									          				</div>
											            </div>
									              </div>
							              	</div>	            
	          								</div>
							            </div>
					              </div>
					            </div>
			            	</div>	            
	          			</div>
			          </div>
	         		</div>	            
	          </div>
	          
	          <div class="MenuItemL">
	          	<div class="MenuItemR">
			          <div class="MenuItem">
			            <div class="LabelItem">
			            	<div class="Test3">MenuItem 3</div>
			            </div>
			          </div>
	          	</div>	            
	          </div>
	          
	          <div class="MenuItemL">
	          	<div class="MenuItemR">
			          <div class="MenuItem">
			            <div class="LabelItem">MenuItem 4</div>
			          </div>
	          	</div>	            
	          </div>
	          
	          <div class="MenuItemL">
	          	<div class="MenuItemR">
			          <div class="MenuItem Level1">
			            <div class="LabelItem">MenuItem 5</div>
			            <div class="MenuItemContainer SubLevel">
			            	<div class="MenuItemL">
	          					<div class="MenuItemR">
					              <div class="MenuItem Level2.1">Sub Item Menu 5.1</div>
					            </div>	            
	          				</div>
					          <div class="MenuItemL">
	          					<div class="MenuItemR">
					              <div class="MenuItem Level2.2">Sub Item Menu 5.2</div>
					            </div>	            
	          				</div>
			            </div>
			          </div>
			        </div>	            
	          </div>
	        </div>
	      </div>
      </div>
    </div>
    
    <script type="text/javascript">
      var uiPopupMenu = document.getElementById("UIPopupMenu") ;
      var container = document.getElementById("WorkingWorkspace") ;
      eXo.webui.UIPopupMenu.init(uiPopupMenu, container, 10, 30) ;      
//      uiPopupMenu.hide(uiPopupMenu);
    </script>
  </body>
</html>